<template>
  <div>
    <div class="circle_warp">
      <div class="circle"></div>
      <div class="scale"></div>
      <v-progress-circular
        :value="progress"
        class="progress"
        :size="216"
        :width="9"
        color="deep-orange lighten-2"
      ></v-progress-circular>
      <div
          class="pointer"
          :class="{ anim: show }"
          :style="{ animationDuration: '3s', '--bg-color': sss }"
        ></div>
    </div>
    
    <v-slider
      v-model="progress"
      color="#FF3868"
      track-color="#3E141F"
      thumb-label="always"
      class="slider"
      @change="progressVlu"
    ></v-slider>

    <button @click="showFn">开始</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class HelloWorld extends Vue {
  public progress: number = 50;
  public show: boolean = false;
  public sss: string = 'rotateZ(300deg)'

  // 进度条发生改变方法
  progressVlu(num: number) {
    this.sss = `rotateZ(${(3.6 * num).toFixed(0)}deg)`;
  }

  // 指针旋转开始
  showFn() {
    this.show = true;

    // 在动画结束后执行某些操作
    // const element = document.querySelector(".pointer");
    // element?.addEventListener("animationend", this.animationFinished);
  }

  // 指针旋转动画结束
  animationFinished() {
    this.show = false;
  }
}
</script>

<style scoped>
.slider {
  width: 270px;
  margin: 10px auto 0;
}

::v-deep .v-slider__thumb::after {
  width: 6px;
  height: 20px;
  border: none;
  border-radius: 0;
  background-color: cornflowerblue;
}

::v-deep .v-slider__thumb:before {
  display: none;
}

::v-deep .v-slider__thumb {
  width: 6px;
  height: 20px;
}

.circle_warp {
  width: 255px;
  height: 255px;
  background-color: rgba(165, 42, 42, 0.5);
  margin: auto;
  position: relative;
}

.circle {
  width: 100%;
  height: 100%;
  background: url(https://img.hxdcsgo.com/nassets/dd_percentage_panel1.png)
    no-repeat;
  background-size: 100% 100%;
  animation: turn 40s linear infinite;
}

.scale {
  width: 100%;
  height: 100%;
  background: url(https://img.hxdcsgo.com/nassets/dd_percentage_panel2.png)
    no-repeat;
  background-size: 100% 100%;
  animation: turn 40s linear infinite;
  animation-direction: reverse;
  position: absolute;
  top: 0;
  left: 0;
}

.progress {
  position: absolute;
  top: 20px;
  left: 20px;
  transform: rotate(-90deg);
}

@keyframes turn {
  0% {
    transform: rotate(0deg);
  }
  5% {
    transform: rotate(18deg);
  }
  10% {
    transform: rotate(36deg);
  }
  15% {
    transform: rotate(54deg);
  }
  20% {
    transform: rotate(72deg);
  }
  25% {
    transform: rotate(90deg);
  }
  30% {
    transform: rotate(108deg);
  }
  35% {
    transform: rotate(126deg);
  }
  40% {
    transform: rotate(144deg);
  }
  45% {
    transform: rotate(162deg);
  }
  50% {
    transform: rotate(180deg);
  }
  55% {
    transform: rotate(198deg);
  }
  60% {
    transform: rotate(216deg);
  }
  65% {
    transform: rotate(234deg);
  }
  70% {
    transform: rotate(252deg);
  }
  75% {
    transform: rotate(270deg);
  }
  80% {
    transform: rotate(288deg);
  }
  85% {
    transform: rotate(306deg);
  }
  90% {
    transform: rotate(324deg);
  }
  95% {
    transform: rotate(342deg);
  }
  100% {
    transform: rotate(1turn);
  }
}

.pointer {
  position: absolute;
  width: 6px;
  height: 95px;
  top: 33px;
  background-color: blueviolet;
  left: calc(50% - 3px);
  transform-origin: center bottom;
}

.anim {
  animation: barMove 6s ease;
  animation-fill-mode: forwards;
}

@keyframes barMove {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: var(--bg-color);
  }
}
</style>